<template>
  <el-select
    v-model="searchValue"
    :placeholder="
      config.placeholder
        ? config.placeholder
        : $t('component.search.select_placeholder') + config.label
    "
    teleported
    clearable
    :filterable="config.filterable"
    :multiple="config.type === 'selectMultiple'"
    :collapse-tags="config.type === 'selectMultiple'"
    :max-collapse-tags="config.type === 'selectMultiple' ? 4 : 1"
    :disabled="config.disabled"
    @change="config.onChange"
    size="default"
  >
    <el-option
      v-for="item in config.option"
      :key="item.value"
      :value="item.value"
      :label="item.label"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps(["model", "config"]);
const emit = defineEmits(["update"]);

const searchValue = computed({
  get() {
    return props.model;
  },
  set(value) {
    emit("update", props.config, value);
  },
});
</script>
